import { useSnapshot } from 'valtio'
import { useCallback, useEffect } from 'react'
import Chart from '../../components/Chart'
import { Pieoption, Histogramoption } from './ChartData'
import CustomerChart from '../../components/Chart'
import { Fragment } from 'react/jsx-runtime'
import HeaderSelection from '@/components/HeaderSelection.tsx'
import { yun } from '@/stores/customer'
import { workbent } from '@/stores/workbenth'

export default function Customer() {
    const store = useSnapshot(yun)
    const store1 = useSnapshot(workbent)
    const onSearch = useCallback((values: any) => {
        store.filter(values)
        store1.filter(values)
    }, [])
    useEffect(() => {
        store.getSearch()
    }, [])
    return (
        <Fragment>
            <div className="relative">
                {/* 顶部筛选区域 */}
                <div className="w-[90%] absolute h-16  left-20 top-6  text-center  bg-white  rounded shadow-sm">
                    <div
                        style={{ boxSizing: 'border-box' }}
                        className=" w-385 m-auto pl-[9em] mt-4"
                    >
                        <HeaderSelection
                            onSearch={onSearch}
                            brandOptions={store.brand} //品牌
                            partitionOptions={store.partition} //分区
                            shopOptions={store.shop} //门店
                            sourceOptions={store.source} //来源
                        />
                    </div>
                </div>
                {/* 卡片区 */}
                <div className="w-[90%] absolute h-66 m-auto left-20 top-23  bg-white  rounded shadow-sm">
                    <h3 className=" pl-5 font-bold color-gray-500">
                        客户数据分析
                    </h3>
                    <hr />
                    <div className=" w-350 flex justify-around  m-auto grid grid-cols-1 md:grid-cols-3 mt-4">
                        {/* 客户总数          */}
                        <div className="w-90 h-45 rounded bg-pink-500">
                            <p className="text-white line-height-1 pl-2">
                                客户总数
                            </p>
                            <div className="h-0.2 bg-white ">
                                <div className="flex justify-around text-white">
                                    <div className="flex-1 m-8 display-block text-center">
                                        <div className="text-7  font-bold mt-3 mb-4">
                                            {
                                                store.resultOptions
                                                    .SalesOrderNumber
                                            }
                                        </div>
                                        <div>新增客户:1</div>
                                    </div>
                                    <div className="w-0.1  bg-white mr-16"></div>{' '}
                                    {/* 白色竖线 */}
                                    <div className="flex-1 mt-5">
                                        <div className="text-xl">
                                            {store.resultOptions.meituanNumber}
                                        </div>
                                        <div className="text-sm">美团客户</div>
                                        <div className="text-xl mt-2 ">
                                            {store.resultOptions.elmNumber}
                                        </div>
                                        <div className="text-sm">
                                            饿了么客户
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {/* 白色横线 */}
                        </div>
                        {/* 新客户 */}
                        <div className="w-90 h-45 rounded bg-blue-500">
                            <p className="text-white line-height-1 pl-2">
                                新客户
                            </p>
                            <div className="h-0.2 bg-white ">
                                <div className="flex justify-around text-white">
                                    <div className="flex-1 m-8 display-block text-center">
                                        <div className="text-7  font-bold mt-3 mb-4">
                                            {store.resultOptions.NewCustomer}
                                        </div>
                                        <div>新增客户:1</div>
                                    </div>
                                    <div className="w-0.1  bg-white mr-16"></div>{' '}
                                    {/* 白色竖线 */}
                                    <div className="flex-1 mt-5">
                                        <div className="text-xl">
                                            {
                                                store.resultOptions
                                                    .meituanNewCustomers
                                            }
                                        </div>
                                        <div className="text-sm">美团客户</div>
                                        <div className="text-xl mt-2">
                                            {
                                                store.resultOptions
                                                    .elmNewCustomers
                                            }
                                        </div>
                                        <div className="text-sm">
                                            饿了么客户
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {/* 老客户 */}
                        <div className="w-90 h-45 rounded bg-yellow-500">
                            <p className="text-white line-height-1 pl-2">
                                老客户
                            </p>
                            <div className="h-0.2 bg-white ">
                                <div className="flex justify-around text-white">
                                    <div className="flex-1 m-8 display-block text-center">
                                        <div className="text-7  font-bold mt-3 mb-4">
                                            {store.resultOptions.patron}
                                        </div>
                                        <div>新增客户:1</div>
                                    </div>
                                    <div className="w-0.1  bg-white mr-16"></div>{' '}
                                    {/* 白色竖线 */}
                                    <div className="flex-1 mt-5">
                                        <div className="text-xl">
                                            {
                                                store.resultOptions
                                                    .meituanOldCustomers
                                            }
                                        </div>
                                        <div className="text-sm">美团客户</div>
                                        <div className="text-xl mt-2">
                                            {
                                                store.resultOptions
                                                    .elmOldCustomers
                                            }
                                        </div>
                                        <div className="text-sm">
                                            饿了么客户
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 新增数据分析 */}
                <div className="w-[90%] absolute h-115 m-auto left-20 top-93   bg-white  rounded shadow-sm">
                    <h3 className=" pl-5 font-bold color-gray-500">
                        新增数据分析
                    </h3>
                    <p style={{ borderBottom: '2px solid #eee' }}></p>
                    <div className="w-300 h-100  m-auto ">
                        {/* <CustomerChart
                            width={1200}
                            height={400}
                            options={Lineoption}
                        /> */}
                        <Chart
                            name="营业趋势分布图"
                            width={'100%'}
                            height={'100%'}
                            options={store.AddCustomer}
                        />
                    </div>
                </div>
                {/* 客户性别分析 */}
                <div className="w-[90%] absolute m-auto top-212  left-20  bg-white rounded-lg shadow-lg">
                    <h3 className="pl-5 font-bold color-gray-500">
                        客户性别分析
                    </h3>
                    <p style={{ borderBottom: '2px solid #eee' }}></p>

                    <div className="w-350 h-100 m-auto flex justify-around grid grid-cols-1 md:grid-cols-3 ">
                        <div>
                            <CustomerChart
                                name="客户性别分布图"
                                width={670}
                                height={400}
                                options={Pieoption}
                            />
                        </div>
                        <div>
                            <CustomerChart
                                name="客户年龄分布图"
                                width={600}
                                height={400}
                                options={Histogramoption}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </Fragment>
    )
}
